<template>
    <!-- <div>layout</div> -->
    <router-view />
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" class="tabbar">
        <van-tabbar-item v-for="item in router.options.routes[0].children" :key="item.path" :icon="item.meta.icon"
            :url="`#/${item.path}`">{{ item.meta.name }}
        </van-tabbar-item>
    </van-tabbar>
</template>

<script setup name="Main">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const active = ref(0)

onMounted(() => {
    const childrenData = router.options.routes[0].children
    // find 查找 返回第一个满足条件的这个对象 findIndex 查找 返回这个索引
    active.value = childrenData.findIndex(item => '/' + item.path === route.path)
})
</script>

<style scoped>
.tabbar {
    background-color: #f5f5f5;
}

.van-tabbar-item--active {
    background-color: #f5f5f5;
}
</style>